<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script>
			  var num = false;
			  function showPost() {
			        if (!num) {
			            document.getElementsByClassName("post")[0].style.display="block";
			            num = true;
			        } else {
			            document.getElementsByClassName("post")[0].style.display="none";
			            num = false;
			        }
					resetInput();
			    }
				function resetInput(){
					document.getElementsByClassName("title")[0].value="";
					document.getElementsByClassName("content")[0].value="";
					//document.getElementsByTagName("select")[0].value="";
					document.getElementsByTagName("select")[0].selectedIndex=0;
				}
				//发布
				function doPost(){
					//1:拿到输入的值:
					var title=document.getElementsByClassName("title")[0].value;
					var content=document.getElementsByClassName("content")[0].value;
					var bankuai=document.getElementsByTagName("select")[0].value;
					//alert(title+":"+content+":"+bankuai);
					//2:随机数,在[0-4]之间;时间
					var touxiangpos=parseInt(Math.random()*4)+1;
					let datestr=new Date().toLocaleString();
					
					var li=document.createElement("li");
					li.innerHTML="<div><img src='images/tou0"+touxiangpos+".jpg'></div><h1>"+title+"</h1><p><span>版块："+bankuai+"</span><span>发表时间："+datestr+"</span></p>";
					document.getElementById("postList").appendChild(li);
					showPost();//隐藏输入框
				}
			function doPost2(){
				//1:拿到输入的值:
				var title=document.getElementsByClassName("title")[0].value;
				var content=document.getElementsByClassName("content")[0].value;
				var bankuai=document.getElementsByTagName("select")[0].value;
				//alert(title+":"+content+":"+bankuai);
				//2:随机数,在[0-4]之间;时间
				var touxiangpos=parseInt(Math.random()*4)+1;
				let datestr=new Date().toLocaleString();
				
				//3:创建元素,加进去
				let li=document.createElement("li");
				var div=document.createElement("div");
				var img=document.createElement("img");
				img.setAttribute("src","images/tou0"+touxiangpos+".jpg");
				div.appendChild(img);
				li.appendChild(div);
				
				let h1=document.createElement("h1");
				h1.innerHTML=title;
				li.appendChild(h1);
				let p=document.createElement("p");
				let sp1=document.createElement("span"); 
				sp1.innerHTML="版块："+bankuai;
				p.appendChild(sp1);
				let sp2=document.createElement("span"); 
				sp2.innerHTML="发表时间："+datestr;
				p.appendChild(sp2);
				li.appendChild(p);
				//
				document.getElementById("postList").appendChild(li);
				
				showPost();//隐藏输入框
			}
		</script>
	</head>
	<body>
		<div class="bbs">
			<header><span onclick="showPost()">我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" onclick="doPost()">
			</div>
		</div>
	</body>
</html>
